<template>
  <div>
    <div class="step-container vux-1px-t">
      <div class="flex flex-space-between step">
        <div class="text-center flex-auto line">
          <p class=""><i class="icon icon-gou step-index"></i></p>
          <p class="title"><b>手机号注册</b></p>
        </div>
        <div class="text-center flex-auto line">
          <p><span class="step-index">2</span></p>
          <p class="title"><b>身份认证</b></p>
        </div>
      </div>
    </div>
    <div>
      <group title="" class="weui-cells_form">
        <x-input title="真是姓名" v-model="formItem.realname" class="weui-vcode" placeholder="请输入真实姓名"></x-input>
        <x-input :max="18" v-model="formItem.card" title="身份证号" class="weui-vcode" placeholder="身份证正面的18位身份证号"></x-input>
      </group>
    </div>
    <div class="uploadID">
      <p class="text-orange">请提交和身份信息一致的证件照片。途鸟将保障你的个人隐私，信息仅仅用于平台审核，不会泄露给任何组织或个人。</p>
      <div class="flex flex-space-between upload">
        <div class="shouchi">
          <input class="file" name="file0" id="uploads0" type="file" accept="capture=camera" @change="update(0)"/>
          <p v-if="!card_img_1">
            <img src="../../../static/img/shenfenzheng.png" style="width: 1.05rem; height: 1.1rem; margin-top: 0.3rem">
          </p>
          <p v-if="!card_img_1" style="padding-top: 0.1rem">上传手持身份证照片</p>
          <div id="previews0" class="preview-box"></div>
        </div>
        <div class="shouchi">
          <input class="file" name="file1" id="uploads1" type="file" accept="capture=camera" @change="update(1)"/>
          <p v-if="!card_img_2"><i class="icon icon-zhengmian"></i></p>
          <p v-if="!card_img_2">上传身份证正面照片</p>
          <div id="previews1" class="preview-box"></div>
        </div>
        <div class="shouchi">
          <input class="file" name="file2" id="uploads2" type="file" accept="capture=camera" @change="update(2)"/>
          <p v-if="!card_img_3"><i class="icon icon-fanmian"></i></p>
          <p v-if="!card_img_3">上传身份证反面照片</p>
          <div id="previews2" class="preview-box"></div>
        </div>
      </div>
    </div>
    <div style="padding: 0.2rem;">
      <x-button type="primary" :show-loading="loading" @click.native="subUplaod" action-type="button">提交审核</x-button>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../../components/PubHeader.vue'
  import { checkCard } from '../../libs/fn'

  export default{
    beforeRouteEnter (to, from, next) {
      const backgo = from.path == '/user/selectAuthentication' ? -2: -1
      next(vm => {
        vm.backgo = backgo
      })
    },
    components: {
      PubHeader
    },
    data() {
      return {
        formItem: {
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          city_code: this.$store.state.userInfo.city_code,
          realname: '',
          card: ''
        },
        card_img_1: '',
        card_img_2: '',
        card_img_3: '',
        loading: false,
        backgo: -1
      }
    },
    methods: {
      subUplaod() {
        if (!this.formItem.realname.match(/^[\u4e00-\u9fa5]{0,}$/) || !this.formItem.realname){
          this.$vux.toast.text('请核对您的姓名', 'middle')
          return false
        }
        const cardIDMsg = checkCard(this.formItem.card)
        if(!cardIDMsg.status){
          this.$vux.toast.text(cardIDMsg.msg, 'middle')
          return false
        }
        if (!this.card_img_1 || !this.card_img_2 || !this.card_img_3){
          this.$vux.toast.text('请上传认证图片', 'middle')
          return false
        }

        let file1 = this.card_img_1,
            file2 = this.card_img_2,
            file3 = this.card_img_3
        let param = new FormData(); //创建form对象
        param.append('card_img_1',file2,file2.name);//通过append向form对象添加数据
        param.append('card_img_2',file3,file3.name);//通过append向form对象添加数据
        param.append('card_img_3',file1,file1.name);//通过append向form对象添加数据
        for (let i in this.formItem) {
          param.append(i,this.formItem[i]);//添加form表单中其他数据
        }
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加请求头

        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '确保填写的资料真实有效,资料不完善或证件照片模糊将导致审核失败！',
          confirmText: '继续完善',
          cancelText: '确认提交',
          onCancel: () => {
            this.loading = true
            this.$vux.loading.show({
              text: '上传资料中'
            })
            this.$http.post($config.host + '/api/Identify/personSendIdentify',param,config)
              .then(res=>{
                this.$vux.loading.hide()
                const {code, msg} = res.data
                if(code == 1) {
                  this.$router.go(this.backgo)
                  this.$vux.toast.text(msg, 'middle')
                } else {
                  this.loading = false
                  this.$vux.toast.text(msg, 'middle')
                }
              })
          }
        })


      },
      update(index) {
        let upload = document.getElementById('uploads' + index),
            preview = document.getElementById('previews' + index),
            imgurl = ''
        window.URL = window.URL || window.webkitURL
        let sUserAgent= navigator.userAgent.toLowerCase()
        let selected_file = upload.files[0]

        if(index === 0) {
          this.card_img_1 = selected_file
        } else if(index === 1) {
          this.card_img_2 = selected_file
        } else if(index === 2) {
          this.card_img_3 = selected_file
        }
        if(sUserAgent.match(/android/i) == "android"){
          let img = new Image()
          img.src = window.URL.createObjectURL(selected_file)
          preview.innerHTML = ''
          preview.appendChild(img)
          img.style.width = '100%'
          img.style.height = '100%'
          let reader = new FileReader()
          reader.onload = function(e) { imgurl = e.target.result }
          reader.readAsDataURL(selected_file)
        }else{
          //判断文件类型是否为图片
          let imageType = /image.*/
          if (!selected_file.type.match(imageType)) {
            return false
          }
          let img = document.createElement('img')
          img.style.width = '100%'
          img.style.height = '100%'
          img.file = selected_file
          preview.innerHTML = ''
          preview.appendChild(img)

          img.onload = function(){
            imgurl = img.src
          }

          var reader = new FileReader();
          reader.onload = function(e) { img.src = e.target.result; };
          reader.readAsDataURL(selected_file);
        }
      }
    }
  }
</script>
<style scoped>
.preview-box{
  width: 3.45rem;
  height: 2.25rem;
  left: 0;
  top: 0rem;
  position: absolute;
  z-index: 4;
  overflow: hidden;
}
.preview-box img{
  display: block;
  width:100%;
  height: 100%;
}
.shouchi{
  position: relative;
}
.file{
  width: 3.45rem;
  height: 2.25rem;
  left: 0;
  top: 0rem;
  opacity: 0;
  position: absolute;
  z-index: 6;
}
.upload{
  flex-wrap:  wrap;
  position: relative;
}
.upload > div{
  width: 3.45rem;
  height: 2.25rem;
  border:1px solid #e5e5e5;
  border-radius: 0.1rem;
  text-align: center;
  margin-top: 0.15rem;
}
.upload .icon{
  font-size: 1rem;
  color: #999;
}
.step-container{
  height: 1.8rem;
  background: #fff;
  margin-bottom: 0.15rem;
  padding-top: 0.4rem;
}

.step{
  height: 1rem; margin: 0px auto;
  width: 5rem;
  position: relative;
}
.step .line:after{
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0.22rem;
  margin-left: 0.23rem;
  margin-right: 0.23rem;
  content: '';
  height: 1px;
  transform: scaleY(0.5);
  background: #ff5722;
}
.step-index.icon{
  background: #ff5722;
  color: #fff;
}
.step-index{
  font-size: 0.3rem;
  height: 0.45rem;
  line-height: 0.42rem;
  width: 0.45rem;
  color: #ff5722;
  border: 1px solid #ff5722;
  display: inline-block;
  border-radius: 50%;
}
.step .title{
  font-size: 0.26rem;
  line-height: 0.6rem;color: #ff5722;
}
  .uploadID{
    margin-top: 0.15rem;
    background: #fff;
    padding: 0.2rem;
  }
</style>
